<template>
	<view>
		<video class="title_video" show-mute-btn enable-play-gesture :src="fastIndex?goodsData.video_c:goodsData.video_a" controls></video>
		<view class="card">
			<view class="top">
				<view class="title">
					{{goodsData.title||''}}
				</view>
				<view class="money">
					<view class="" :style="userData.member_zt==2?'color: #FFCB71;':''">
						<!-- 				{{goodsData.price_a?(userData.member_zt==2?(goodsData.price_s?'￥'+goodsData.price_s:'0'):'￥'+goodsData.price_a):'0'}}<text
							v-if="goodsData.props.price">-￥{{goodsData.price_a+goodsData.props.price}}</text> -->
						<text v-if="userData.member_zt==2">会员价：</text>
						<text style="font-size: 24upx;margin-right: 5upx;">￥</text>
						<text>{{goodsData.price_a?(userData.member_zt==2?(goodsData.price_s?goodsData.price_s:'0'):goodsData.price_a):'0'}}</text>

						<text v-if="goodsData.props.price" style="padding-left: 5upx;">
							/{{(goodsData.price_a?(userData.member_zt==2?(goodsData.price_s?goodsData.price_s:0):goodsData.price_a):0)+goodsData.props.price}}
							<text style="font-size: 24upx;margin-left: 5upx;">(含道具)</text>
						</text>
					</view>
					<view class="" @click="goVip" v-if="userData.member_zt!=2&&goodsData.price">
						<image src="../../static/vipIcon.png" mode=""></image>
						会员立减{{goodsData.price - goodsData.price_s}}
					</view>
				</view>



				<view class="condition">
					<view class="condition_item" v-if="item.list.length" v-for="(item ,index) in goodsData.type_list">
						<view class="">

							{{item.title}}
						</view>
						<view class="value">
							<view class="" v-for="(items ,indexs) in item.list" v-if="!indexs">
								{{items}}
							</view>

						</view>
					</view>
				</view>


				<!-- 			<view class="condition_item">
						<view class="">
							<image src="../../static/player.png" mode=""></image>
							模式
						</view>
						<view class="">
							单队(4-10人)/分队(≥8人)
						</view>
					</view>
					<view class="condition_item">
						<view class="">
							<image src="../../static/time.png" mode=""></image>
							时长
						</view>
						<view class="">
							10-12min
						</view>
					</view>
			 -->

				<!-- 				<view class="synopsis">
					<view class="synopsis_portion" @click="descShow=true">
						{{goodsData.desc}}
					</view>
				</view> -->

			</view>
			<u-gap height="16" bgColor="#FAFAFA"></u-gap>
			<view class="middle">
				<!-- 		<view class="prop" @click="show=true" v-if="goodsData.props">
					<text>选择</text><text>讲解演示&互动系统/道具</text>
					<u-icon name="arrow-right"></u-icon>
				</view> -->

				<!-- 			<view class="explain">
					<view class="explain_item">
						<view class="text">
							<view class="">
								<image src="../../static/vipIcon.png" mode=""></image>
								<text>讲解演示&互动系统</text>
							</view>
							<view class="">
								30天40人内无限畅嗨
							</view>
						</view>
						<!-- <u-icon name="arrow-right"></u-icon> -->
				<!-- 					</view>
					<view class="explain_item" @click="navProp">
						<view class="text">
							<view class="">
								<image src="../../static/vipIcon.png" mode=""></image>
								<text>道具准备 </text>
							</view>
							<view class="">
								{{goodsData.props?'道具明细及摆放演示':'无需道具'}}

							</view>
						</view>
						<u-icon name="arrow-right" v-if="goodsData.props"></u-icon>
					</view>
				</view> -->
				<!-- 
<view class=""  v-if="goodsData.content_s">
	   	<text class="" style="font-size: 28upx;color: #333333;">
					购买须知：
				</text>
				<text class="" style="font-size: 	24upx;color: #666666;white-space: nowrap;">
					汉皇重色思倾国，御宇多年求不得。
					杨家有女初长成，养在深闺人未识。
					天生丽质难自弃，一朝选在君王侧。
					回眸一笑百媚生，六宫粉黛无颜色。
					春寒赐浴华清池，温泉水滑洗凝脂。
					侍儿扶起娇无力，始是新承恩泽时。
					云鬓花颜金步摇，芙蓉帐暖度春宵。
				</text>
</view> -->
				<u-parse :content="goodsData.content"></u-parse>

				<view class="synopsis" v-if="goodsData.content_s">
					<view class="synopsis_portion" @click="descShow=true">
						<text class="" style="font-size: 28upx;color: #333333;">
							<text style="color: #FFCB71;">购买须知及提示</text>
						</text>
					</view>
				</view>




			</view>

			<u-gap height="16" bgColor="#FAFAFA"></u-gap>
			<!-- 			<view class="bottom">
				<u-parse :content="content"></u-parse>
			</view> -->

			<view class="live" v-if="!fastIndex">
				<view class="live_title">
					<view class="left_line">

					</view>
					<view class="text">
						<u-icon name="heart-fill" color="#FF3636" size="28" style="margin-right: 6upx;"></u-icon>你可能还喜欢
					</view>
					<view class="right_line">

					</view>
				</view>

				<goodsVideoList :goodsList="likeGoodsList" :scrollHeight="`calc(100vh - 56rpx)`" />
			</view>

			<u-popup :show="descShow" @close="descShow=false" :round="20">
				<view class="" style="padding: 20upx 0;">
					<scroll-view scroll-y="true" style="height: 70vh;">
						<view style="padding: 30upx;">


							<u-parse v-if="descShow" :content="goodsData.content_s"></u-parse>
						</view>
					</scroll-view>
				</view>


			</u-popup>

			<u-popup :show="show" :round="24" @close="close">
				<view class="popup_">
					<view class="goods">
						<image :src="goodsData.pic" mode=""></image>
						<view class="text">
							<view class="">
								{{goodsData.title}}
							</view>
							<view class="">
								<block v-if="!fastIndex">
									￥{{goodsData.price_a?(userData.member_zt==2?(goodsData.price_s?goodsData.price_s:'0'):goodsData.price_a):'0'}}
								</block>
								<block v-else>
									￥{{goodsData.price_a?(userData.member_zt==2?goodsData.price_s||'':goodsData.price_a):''}}
								</block>

							</view>

							<view class="" fastIndex>

							</view>
						</view>
					</view>
					<scroll-view scroll-y="true" style="height: 50vh;margin-top: 10upx;">
						<view class="title">
							购买挑战
						</view>
						<view class="option">
							<view class="text text_">
								{{goodsData.title}}
							</view>
						</view>

						<block v-if="goodsData.props">
							<u-line margin="20rpx 0"></u-line>
							<view class="" style="display: flex;">
								<view class="title">
									购买道具
								</view>
								<view class=""
									style="color: #825d2e;display: flex;font-size: 24upx;align-items: center;"
									@click="navProp">
									道具说明 >
								</view>
							</view>

							<view class="option" style="flex-direction: column;">
								<!-- 	<view class="" style="margin-bottom: 40upx;">
									<text :class="usage==1?'text text_':'text'"
										@click="usage=1">{{goodsData.props.title}}(租赁)
										<text>￥{{goodsData.props.price_s}}</text></text>
								</view> -->
								<view class="" style="margin-bottom: 40upx;">
									<text :class="usage==2?'text text_':'text'"
										@click="setUsage">{{goodsData.props.title}}
										<text>￥{{goodsData.props.price}}</text></text>
								</view>
							</view>

							<view style="display: flex;align-items: center;">
								<view class="title">
									数量 <text>（套）</text>
								</view>
								<view class="num">
									<view class="reduce" @click="reducePropsNum">
										-
									</view>
									<text>{{propsNum}}</text>
									<view class="add" @click="addPropsNum">
										+
									</view>
								</view>
							</view>
							<view class="hint">
								<!-- 								<view class="">
									温馨提示：
								</view> -->
								<text class="">
									{{goodsData.cart_desc}}
								</text>
							</view>
						</block>

					</scroll-view>
					<view class="addShopping" @click="addShopping">
						加入购物车
					</view>

				</view>
			</u-popup>


			<image v-if="!fastIndex" class="shoppingCart" src="../../static/shoppingCart.png" mode=""
				@click="goShoppingCart"></image>
			<view class="bottom">

				<button open-type="contact" class="service" type="default" :send-message-title="goodsData.title"
					:send-message-path="`/pages/goodsDetails/goodsDetails?id=${id}`" :send-message-img="goodsData.pic"
					show-message-card @contact="contact">
					<view class="" style="display: flex;justify-content: center;">
						<u-icon name="kefu-ermai" size="40rpx"></u-icon>
					</view>

					<view class="">

						客服
					</view>
				</button>


				<view class="collect" @click="collect">
					<view class="" style="display: flex;justify-content: center;">
						<u-icon name="heart" size="40rpx" v-if="goodsData.collect_zt==0"></u-icon>
						<u-icon name="heart-fill" size="40rpx" color="#FF0000" v-else></u-icon>

					</view>

					<view class="">
						收藏
					</view>
				</view>
				<view class="addShopping" @click="prepare">
					{{fastIndex?'开始挑战':'加入购物车'}}
					<text v-if="goodsData.is_free==2" style="font-size: 26rpx;margin-left: 10rpx;">
						￥{{goodsData.price_a?(userData.member_zt==2?goodsData.price_s||'':goodsData.price_a):''}}</text>

				</view>
			</view>

		</view>



		<u-popup :show="sexShow" mode="center" round="12rpx" :safeAreaInsetBottom="false">
			<view class="sex">
				<view class="text">
					请选择您的性别
				</view>
				<view class="sex_list">
					<view :class="sex==1?'active':''" style="margin-right: 64upx;" @click="sex=1">
						<u-icon name="man" color="#91BCE6" size="120rpx" :customStyle="{fontWeight:700}"></u-icon>
					</view>
					<view :class="sex==2?'active':''" style="margin-left: 64upx;" @click="sex=2">
						<u-icon name="woman" color="#FFA5D9" size="120rpx" :customStyle="{fontWeight:700}">></u-icon>
					</view>
				</view>
				<view class="join_game" @tap="$u.throttle(establish, 500)">
					加入挑战
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import goodsVideoList from '@/components/goodsVideoList/goodsVideoList.vue'
	export default {
		components: {
			goodsVideoList
		},
		data() {
			return {
				show: false,
				descShow: false,
				id: '',
				goodsNum: 1,
				propsNum: 1,
				goodsData: {},
				userData: {},
				likeGoodsList: [],
				usage: 2, //1租赁 2购买 
				fastIndex: false, //是否为 一键开玩
				sex: 1,
				sexShow: false
			}
		},
		onLoad(e) {
			this.fastIndex = e.fastIndex == "true"
			this.id = e.id
			
			this.upData()
    if(this.fastIndex) return;

			this.$myRuquest('home/index/activ_love', {
				activ_id: this.id,
				num: 10
			}).then(res => {
				this.likeGoodsList = res.data.activ_list
			})
		},
		onShow() {
			this.userData = uni.getStorageSync("userData")
		},
		onShareAppMessage() {
			return {
				title: this.goodsData.title,
				imageUrl: this.goodsData.pic
			}
		},
		methods: {
			upData() {
				let url = 'home/index/activity_det'
				if (this.fastIndex) url = 'home/index/play_detail'
				this.$myRuquest(url, {
					activ_id: this.id
				}).then(res => {
					
					this.goodsData = res.data.list
								
				})

			},
			prepare() {
				if (this.fastIndex) {
					if (this.goodsData.is_free == 2) {
						this.$myRuquest('home/user/act_custom_pay', {
							id: this.goodsData.id
						}).then(res => {
							this.payMoney(res.data)
						})
					} else {
						this.establishOff()
					}

				} else {
					this.show = true
				}
			},
			setUsage() {
				this.usage = this.usage == 2 ? '' : 2
				this.propsNum = this.usage == 2 ? 1 : 0
			},
			goVip() {
				uni.navigateTo({
					url: '/pages/me/openVip/openVip'
				})
			},
			navProp() {
				if (!this.goodsData.props) return;
				uni.navigateTo({
					url: './propExplain?data=' + encodeURIComponent(JSON.stringify(this.goodsData.props))
				})
			},
			collect() {
				this.$myRuquest('home/user/collect_save', {
					type: 1,
					collect_id: this.id
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					this.upData()
				})
			},
			addShopping() {
				let data = {
					activ_id: this.goodsData.id,
					activ_num: this.goodsNum,

				}
				if (this.usage == 2 && this.goodsData.props) {
					data.props_id = this.goodsData.props.id
					data.props_num = this.propsNum
				} else if (this.usage == 1 && this.goodsData.props) {
					data.rent_id = this.goodsData.props.id
					data.rent_num = this.propsNum
				}
				this.$myRuquest('home/user/cart_save', data).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					this.show = false
				})
			},
			close() {
				this.show = false
			},
			addGoodsNum() {
				this.goodsNum++
			},
			reduceGoodsNum() {
				if (this.goodsNum - 1 > 0) this.goodsNum--
			},
			addPropsNum() {
				this.propsNum++
				this.usage = 2
			},
			reducePropsNum() {
				if (this.propsNum > 0) this.propsNum--
				if (this.propsNum == 0) this.usage = ''

			},
			goShoppingCart() {
				uni.navigateTo({
					url: '/pages/trolley/trolley'
				})

			},

			payMoney(data) {
				let that = this
				uni.requestPayment({
					provider: 'wxpay',
					nonceStr: data.nonceStr,
					package: data.package,
					paySign: data.paySign,
					signType: data.signType,
					timeStamp: data.timeStamp,
					success: function(res) {
						that.establishOff()
					},
					fail: function(err) {
						that.$refs.uToast.show({
							type: 'error ',
							message: '支付失败'
						})
					}
				})
			},
			establishOff() {
				if (this.goodsData.game_type.id < 8) return this.establish();
				this.sexShow = true
			},
			establish() {
				this.sexShow = false
				let data = {
					title: `团建活动${this.$u.timeFormat(Date.parse(new Date()), 'yyyymmddhhMMss')}`,
					team: this.goodsData.game_type.id < 8 ? 1 : 2,
					team_type: 2,
					activ_id: this.goodsData.id,
					sex: this.sex,
					is_one: 1
				}
				this.$myRuquest('home/game/game_add', data).then(res => {
					this.$myRuquest('home/index/config').then(ress => {
						uni.setStorageSync('video_s', ress.data.video_s);
						uni.setStorageSync('video', ress.data.video);
						uni.setStorageSync('gameDataVideoId', '');
						if (this.goodsData.game_type.id < 8) {
							  uni.setStorageSync('gameId', res.data.game_id);
							this.$myRuquest('home/game/game_go', {
								game_id: res.data.game_id
							}).then(res=>{
									this.$ws.init()
							})
						} else {
							uni.navigateTo({
								url: '/pages/createActivity/formTeam?gameId=' + res.data.game_id
							})
						}


					})

				})
			},
			contact(e) {
				console.log('客服返回消息', e)
			}
		}
	}
</script>

<style lang="scss">
	.title_video {
		width: 100vw;
		height: 392upx;
		position: fixed;
		top: 0;
		left: 0;
	}

	.card {
		width: 100vw;
		min-height: 100vh;
		background-color: #FFFFFF;
		border-radius: 28upx;
		position: relative;
		top: 370upx;
		padding: 20upx 0;

		.top {
			padding: 20upx 40upx;
			padding-top: 0;

			.title {
				font-size: 44upx;
				color: #333333;
			}

			.money {
				display: flex;
				margin-top: 12upx;
				margin-bottom: 30upx;
				align-items: center;

				view:nth-child(1) {
					font-size: 40upx;
					margin-right: 20upx;
				}

				view:nth-child(2) {
					background-color: #000000;
					color: #FFCB71;
					height: 40upx;
					line-height: 40upx;
					font-size: 24upx;
					border-radius: 20upx;
					padding: 0 24upx;
					display: flex;
					align-items: center;

					image {
						height: 32upx;
						width: 32upx;
						margin-right: 4upx;
					}
				}
			}

			.condition {
				display: flex;
				flex-wrap: wrap;


				.condition_item {
					// flex: 1;
					// min-width: 190upx;
					flex-shrink: 0;
					// background-color: #FAFAFA;
					border-radius: 8upx;
					padding: 10upx;
					margin-right: 20upx;
					display: flex;

					.value {
						color: #666666;
						font-size: 20upx;
						text-align: right;
						display: flex;
						margin-left: 4px;
						flex-wrap: wrap;

						view {
							margin: 5upx;
						}
					}

					>view:nth-child(1) {
						display: flex;
						font-size: 24upx;
						font-weight: 700;

						// image {
						// 	width: 40upx;
						// 	height: 40upx;
						// }
					}


				}


			}


		}

		.middle {
			padding: 20upx;

			.prop {
				padding: 20upx;
				display: flex;
				background-color: #F6F6F6;
				border-radius: 8upx;
				font-size: 28upx;

				>text:nth-child(1) {
					margin-right: 30upx;

					color: #999999;
					font-weight: 700;
				}

				>text:nth-child(2) {
					flex: 1;
					color: #333333;
				}
			}

			.explain {
				display: flex;
				margin: 20upx 0;

				.explain_item {
					background-color: #F6F6F6;
					flex: 1;
					display: flex;
					padding: 20upx 16upx;
					border-radius: 8upx;

					.text {
						flex: 1;
						font-size: 24upx;
						color: #333333;
						font-weight: 700;

						>view:nth-child(1) {
							display: flex;

							image {
								width: 40upx;
								height: 40upx;
								margin-right: 6upx;
							}
						}

						>view:nth-child(2) {
							margin-top: 18upx;
							text-align: center;
							color: #666666;
							font-size: 20upx;
							font-weight: 100;
						}
					}
				}

				>view:nth-child(1) {
					margin-right: 9upx;
				}

				>view:nth-child(2) {
					margin-left: 9upx;
					background-color: #FEF2E2;
				}
			}
		}

		.live {
			background-color: #FAFAFA;
			padding: 0 30upx;

			.live_title {
				display: flex;
				align-items: center;
				padding: 0 120upx;

				.left_line {
					flex: 1;
					height: 4upx;
					background-image: linear-gradient(to right, #FAFAFA, #FF3636);
				}

				.text {
					display: flex;
					font-size: 28upx;
					color: #333333;
					padding: 0 14upx;
					height: 56upx;
					line-height: 56upx;
					font-weight: 700;
				}

				.right_line {
					flex: 1;
					height: 4upx;
					background-image: linear-gradient(to left, #FAFAFA, #FF3636);
				}
			}
		}
	}

	.popup_ {
		padding: 44upx 40upx;
		padding-bottom: 0;
		align-items: center;

		.goods {
			display: flex;

			image {
				width: 190upx;
				height: 190upx;
				border-radius: 8upx;
				margin-right: 20upx;
			}

			.text {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				font-size: 32upx;
				color: #333333;

				view:nth-child(1) {

					display: -webkit-box;
					/*设置为弹性盒子*/
					-webkit-line-clamp: 2;
					/*最多显示3行*/
					overflow: hidden;
					/*超出隐藏*/
					text-overflow: ellipsis;
					/*超出显示为省略号*/
					-webkit-box-orient: vertical;
					word-break: break-all;
				}

				view:nth-child(2) {
					font-size: 40upx;
					font-weight: 700;
				}
			}

		}

		.title {
			font-size: 32upx;
			color: #333333;
			font-weight: 700;
			margin: 20upx 0;
			flex: 1;

			text {
				font-size: 28upx;
				color: #999999;
				font-weight: 100;
			}

		}

		.option {
			display: flex;
			flex-wrap: wrap;
			// margin-bottom: 20upx;

			.text {
				// height: 44upx;
				padding: 10upx 20upx;
				border-radius: 44upx;
				// line-height: 44upx;-
				margin-right: 20upx;
				background-color: #ebebeb;

				color: #999999;
				font-size: 24upx;
				margin-bottom: 20upx;

				text {
					margin-left: 160upx;
				}
			}

			.text_ {
				background-color: #FEF2E2;

				color: #825d2e;
			}
		}

		.hint {
			display: flex;
			font-size: 28upx;
			color: #999999;

			view:nth-child(1) {
				width: 140upx;
			}

			view:nth-child(2) {
				flex: 1;
			}
		}

		.addShopping {
			width: 360upx;
			background-color: #FED194;
			color: #825d2e;
			height: 80upx;
			border-radius: 80upx;
			line-height: 80upx;
			margin: 50upx auto 20upx auto;
			font-size: 36upx;
			text-align: center;
			font-weight: 100;
		}
	}

	.num {
		display: flex;

		.add,
		.reduce {
			width: 40upx;
			height: 40upx;
			line-height: 40upx;
			text-align: center;
			border-radius: 50%;
			background-color: #FED194;
			color: #825d2e;

		}

		text {
			margin: 0 15upx;
		}

		.add {}

		.reduce {}
	}

	.bottom {
		background-color: #FFFFFF;
		padding: 20upx 50upx;
		display: flex;
		font-size: 28upx;
		font-weight: 700;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9998;
		text-align: center;

		.service {
			flex: 2;
			background-color: #FFFFFF !important;
			border-radius: 0 !important;
			padding: 0 !important;
			font-size: 28upx !important;
			line-height: 1.5em !important;
		}

		.collect {
			flex: 2;
		}

		.addShopping {
			flex: 7;
			background-color: #FED194;
			color: #825d2e;
			height: 80upx;
			border-radius: 80upx;
			line-height: 80upx;
			margin-left: 40upx;
			font-size: 36upx;
			text-align: center;
			font-weight: 100;
		}
	}

	.shoppingCart {
		width: 90upx;
		height: 90upx;
		border-radius: 45upx;
		position: fixed;
		right: 20upx;
		bottom: 180upx;
		z-index: 9999;
	}

	button::after {
		border: none;
	}





	.synopsis {
		margin-top: 20upx;

		.synopsis_portion {
			font-size: 24upx;
			color: #666666;
			text-overflow: ellipsis;

			display: -webkit-box;

			-webkit-box-orient: vertical;

			-webkit-line-clamp: 1;
			/* 这里是超出几行省略 */

			overflow: hidden;

			text-align: center;
		}
	}



	.sex {
		padding: 0 132upx;

		.text {
			font-size: 36upx;
			color: #333333;
			font-weight: 700;
			text-align: center;
			padding: 40upx 0;
		}

		.sex_list {
			display: flex;
			justify-content: space-between;

			view {
				width: 140upx;
				height: 140upx;
				// padding-top: 10rpx;
				background-color: #E8E8E8;
				border-radius: 8upx;
			}

			.active {
				border: 2upx solid #91BCE6;
			}
		}

		.join_game {
			width: 234upx;
			height: 64upx;
			line-height: 64upx;
			text-align: center;
			border-radius: 64upx;
			margin: 0 auto;
			margin-top: 56upx;
			margin-bottom: 20upx;
			font-size: 28upx;
			color: #AC7D3D;
			background-color: #FED194;
		}
	}
</style>
